<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8" import="java.util.List"%>
 
<html>
<head>
<%@ include file="/jsp/include/header.jsp"%>
</head>
<body>
<div class="mini-splitter" style="width:100%;height:100%;" allowResize="false"> 
	<div size="600" showCollapseButton="false">
        <div class="mini-toolbar" style="padding:5px;border-top:0;border-left:0;border-right:0;">        
             <a class="mini-button" iconCls="icon-add"   onclick="newRow()">新增</a>       
             <a class="mini-button" iconCls="icon-search"   onclick="search()">查询</a>       
                        
        </div>
        <div class="mini-fit">
		    <div id="datagrid1" class="mini-datagrid" style="width:100%;height:100%;" allowResize="false"
		        url="<%=ctx %>/sys/role/list.htm"  borderStyle="border:0;" idField="role_id" multiSelect="false"   
		        onrowdblclick="rowEdit"    pageSize="20" sizeList="[20]"   >
		        <div property="columns">
		          
		            <div field="role_name" width="60" headerAlign="center" allowSort="true">角色
		            <input property="editor" class="mini-textbox" />
		            </div>  
		            <div type="comboboxcolumn" field="state" width="60" headerAlign="center" allowSort="false" align="center"  renderer="onStates"   >状态
		            </div>   
		             <div field="ct_date" width="80"  dateFormat="yyyy-MM-dd"  headerAlign="center"  
		             allowSort="false" align="center"  >创建时间</div>                                 
		            <div field="role_desc" width="200" headerAlign="center" allowSort="false">说明
		            </div>                     
		                                        
		           
		             <div name="action" width="80" headerAlign="center" align="center" renderer="onActionRenderer" 
		             cellStyle="padding:0;"></div>          	                        
		        </div>
		    </div>
		   <div id="editWindow" class="mini-window" title="角色配置" style="width:400px;" 
		    showModal="true" allowResize="false" allowDrag="true">
			    <div id="editform" class="form" >
			        <input class="mini-hidden" name="role_id"/>
			        <table style="width:100%;">
			            <tr>
			                <td style="width:50px;">角色：</td>
			                <td style="width:125px;"><input name="role_name" class="mini-textbox" 
			                	required="true" vtype="rangeLength:2,10" /></td>
			                <td style="width:50px;">状态：</td>
			                <td style="width:125px;">
			                	<input name="state" class="mini-combobox"  data="States" required="true" />
			               	</td>
			            </tr>
			            <tr>
			                 <td style="width:30px;">说明：</td>
			                <td colspan="3" style="width:150px;"><input name="role_desc" class="mini-textarea" vtype="maxLength:50" /></td>
			            </tr>
			            <tr>
			                <td style="text-align:right;padding-top:5px;padding-right:20px;" colspan="4">
			                <a class="mini-button" iconCls="icon-save" onclick="updateRow()">保存</a>     
			                <a class="mini-button" iconCls="icon-cancel" onclick="cancelRow()">取消</a>     
			                </td>                
			            </tr>
			       
			        </table>
			         
			      </div>
			  </div>
 		  </div>
    </div>
	<div showCollapseButton="false"  >
		 <div class="mini-toolbar" style="padding:2px;border-top:0;border-left:0;border-right:0;">       
	        <table style="width:100%;">
                <tr>
                    <td style="width:100%;">
                      <b><span id="treeTitle">菜单权限</span></b>                                    
                    </td>   
                     <td style="white-space:nowrap;">
                     <span class="separator"></span> 
                        <a class="mini-button"   iconCls="icon-save"   onclick="saveCfg()" >保存</a>          
	            		<a class="mini-button"  iconCls="icon-reload"   onclick="reloadTree()" >清空</a>       
                    </td>
                </tr>
            </table>                             
	    </div>
		<div class="mini-fit">
			 <ul id="tree2" class="mini-tree" url="<%=ctx %>/sys/menu/list.htm?flag=my" style="width:100%;"
			        showTreeIcon="true" textField="m_name" idField="m_id" parentField="sub_m_id" resultAsTree="false"
			        showCheckBox="true" checkRecursive="true" allowSelect="true" enableHotTrack="false"
			        onnodecheck="onnodecheck"  expandOnLoad="true"  >
			</ul>
		</div>
	</div>
</div>
	
</body>
<script>
var States = [{ id: 'A', text: '在用' }, { id: 'X', text: '注销'}];
mini.parse();
var grid = mini.get("datagrid1");
grid.load();
grid.sortBy("role_name", "asc");

var editWindow = mini.get("editWindow");

var tree = mini.get("tree2");
var tempRoleId="";

function search() {
    grid.load();
}
function onStates(e) {
    for (var i = 0, l = States.length; i < l; i++) {
        var g = States[i];
        if (g.id == e.value) return g.text;
    }
    return "";
}
function onActionRenderer(e) {
    var grid = e.sender;
    var record = e.record;
    var uid = record._uid;
    var rowIndex = e.rowIndex;

    var s =  ' <a class="Edit_Button" href="javascript:configMenu(\'' + record.role_id +"\',\'"+record.role_name+ '\')">配置权限</a>'

    if (grid.isEditingRow(record)) {
        s = '<a class="Update_Button" href="javascript:updateRow(\'' + uid + '\')">更新</a>'
            + '<a class="Cancel_Button" href="javascript:cancelRow(\'' + uid + '\')">取消</a>'
    }
    return s;
}
function newRow() {            
	var row = {};
    grid.addRow(row, 0);

    editRow(row._uid);
}
function rowEdit(e){
	 
    var record = e.record;
    editRow(record._uid);
}
function cancelRow() {
    grid.reload();
    editWindow.hide();
}
function editRow(row_uid) {
    var row = grid.getRowByUID(row_uid);
    if (row) {

        editWindow.show();
        var form = new mini.Form("#editform");
        form.clear();
       
		if (typeof(row.role_id) != "undefined") { 
			form.loading();
	        $.ajax({
	            url: "<%=ctx%>/sys/role/get.htm",
	            data:"id="+row.role_id,
	            type:"post",
	            success: function (text) {
	                form.unmask();
	                var o = mini.decode(text);
	                form.setData(o);
	            },
	            error: function () {
	                alert("表单加载错误");
	                form.unmask();
	            }
	        });
        
		}

    }
}
function updateRow() {            
    var form = new mini.Form("#editform");
    form.validate();
    if (form.isValid() == false) return;

    var o = form.getData();

    grid.loading("保存中，请稍后......");
    var json = mini.encode([o]);
    $.ajax({
        url: "<%=ctx%>/sys/role/save.htm",
        data: { data: json },
        type:"post",
        success: function (text) {
        	mini.alert("保存成功");
            grid.reload();
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert(jqXHR.responseText);
        }
    });

    editWindow.hide(); 
}

function onnodecheck(e){
	var tree = e.sender;
    var node = e.node;
	var pidnode;
	while(tree.getParentNode(node)._id!=-1)
	{
		pidnode=tree.getParentNode(node);
		var nodeArray=tree.getChildNodes(pidnode);
		for(var i=0;i<nodeArray.length;i++){
			if(tree.isCheckedNode(nodeArray[i]))
				tree.checkNode(pidnode);
		}
		node=pidnode;
	}
}
function reloadTree(){
	tree.load(tree.getUrl());	
}
function configMenu(role_id,role_name){
	 $.ajax({
	        url: "<%=ctx%>/sys/roleMenu/list.htm",
	        data: {role_id: role_id },
	        type:"post",
	        success: function (text) {
	        	var obj = mini.decode(text);
	        	var val;
	        	if(obj.length>0){
	        		for(i=0;i<obj.length;i++){
	        			if(val=="")
	        				val=obj[i].m_id;
	        			else
	        				val+=","+obj[i].m_id;
	        		}
	        	}
	        	tree.setValue(val);
	        	tree.expandAll();
	        	$("#treeTitle").html(role_name)
	        	tempRoleId=role_id;
	        },
	        error: function (jqXHR, textStatus, errorThrown) {
	            alert(jqXHR.responseText);
	        }
	    });
}
function saveCfg(){
	if(tempRoleId==""){
		mini.alert("请选择角色，点击配置权限");
		return false;
	}
	if(tree.getValue()==""){
		mini.alert("菜单权限为空，请至少选择一项进行保存");
		return false;
	}else{
		$.ajax({
	        url: "<%=ctx%>/sys/roleMenu/save.htm",
	        data: {role_id:tempRoleId,m_ids:tree.getValue()},
	        type:"post",
	        success: function (text) {
	        	mini.alert(text);
	        },
	        error: function (jqXHR, textStatus, errorThrown) {
	            alert(jqXHR.responseText);
	        }
	    });
	}
	
}
</script>
</html>